<template>
    <div class="download">
        <BackHeader>
            我的下载
        </BackHeader>

        <div class="a1">
            <div calss="b1">
                
                <span class="d1 title-dot">下载中</span>
            </div>
            <div class="box">
                <BookListFirst class="in-box" v-for="s,i in books" :books="s"></BookListFirst>
            </div>
        </div>

        <div class="a2">
            <div class="b1">

                <span class="d1 title-dot">已下载</span>
            </div>
            <div class="box">
                <BookListFirst class="in-box" v-for="s,i in books" :books="s"></BookListFirst>
            </div>
        </div>


    </div>
</template>

<script>

import {mapState} from "vuex";
import BookListFirst from "../components/BookListFirst.vue";
import BackHeader from "../components/BackHeader.vue"; 

export default {
    name:"MineDownload",
    computed:{
        ...mapState(["books"])
    },
    components:{
        BackHeader,
        BookListFirst,
    },
    mounted(){
        this.$store.dispatch("getBooks");
    }
}
</script>

<style scoped>
    .download{
        height:100vh;
        padding:0 3.9vw;
    }
     .in-box{
         display:inline-block;
         margin-right:10.1vw;
     }
     .in-box:nth-of-type(3n){
         margin-right:0;
     }
     .box{
         margin-top:5.3vw;
     }
    .c1{
        width:1vw;
        height:1vw;
        border-radius:50%;
        background-color:
    }
    .b1{
        border-bottom:5.3vw;
    }
    .a1{
        border-bottom:9.7vw;
    }
    .d1{
        font-size:4.8vw;
        font-weight: bold;
        color:#333333;
    }
    .a2{
        margin-top:9.7vw;
    }
</style>